/*
 * @Description: 距离模块小元素
 * @Author: yingying.fan
 * @Date: 2019-05-23 13:49:18
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-05-23 14:51:47
 */
<template>
  <div>
    <p class="baseColorNoAcitve fontsize28">
      <span class="distance-stopnum">{{stopNum}}</span>
      {{stopInfo}}
    </p>
    <p class="fontsize24 distance-distance">{{distanceStr}}</p>
  </div>
</template>

<script>
import DistanceModel from '../model/DistanceModel.js'
import { BUS_IS_ARRIVED, BUS_SOON_ARRIVE } from '../constants/BusState.js'
export default {
  props: {
    distanceInfo: {
      type: DistanceModel,
      default: () => {
        return null
      }
    }
  },
  computed: {
    stopNum() {
      if (this.distanceInfo.stopNum === BUS_SOON_ARRIVE || this.distanceInfo.stopNum === BUS_IS_ARRIVED) {
        return ''
      }
      return this.distanceInfo.stopNum
    },
    stopInfo() {
      let str = ''
      switch (this.distanceInfo.stopNum) {
        case BUS_SOON_ARRIVE:
          str = '即将进站'
          break
        case BUS_IS_ARRIVED:
          str = '已经到站'
          break
        default:
          str = '站'
          break
      }
      return str
    },
    distanceStr() {
      if (this.distanceInfo.stopNum !== BUS_IS_ARRIVED) {
        let distance = this.distanceInfo.distance
        try {
          distance = parseFloat(distance)
          if (distance > 1000) {
            distance = (distance / 1000).toFixed(1) + '公里'
          } else {
            distance += '米'
          }
          return `约${distance}`
        } catch (error) {
          return distance
        }
      }
      return ''
    }
  }
}
</script>

<style>
.distance-stopnum {
  font-size: 54px; /*px*/
}
.distance-distance {
  margin-top: 13px;
}
</style>
